<template>
  <div class="nbox1">
    <div class="htitle">前线报道</div>
    <div>
      <span>本赛季首日日期是 {{ sval.guild_data.date[0] }}</span>
      <span>，共有 {{ sval.guild_data.user_arr.length }} 人参与会战</span>
      <span v-if="sval.guild_data?.date?.length >= 7">
        ，距离本期会战已经过去 {{ set.jsrq(sval.guild_data.date[6]) }} 天
      </span>
      <template v-if="sval.guild_data?.date?.length < 7">
        <span>，还剩 {{ val.yds }} 刀未出</span>
        <span>，本期会战还剩 {{ 7 - sval.guild_data.date.length }} 天结束</span>
      </template>
    </div>
  </div>
  <div class="nbox1">
    <div class="htitle">首领数据</div>
    <div class="nbox3 tips3">点击头像查看统计与评分</div>

    <div class="gap4">
      <template v-for="item in sval.guild_data?.info">
        <div @click="set.ck_boss(item.boss_name)" class="boss_box nbg3">
          <div class="_title">{{ item.boss_name }}</div>
          <div class="bossimgbox" style="height: 80px">
            <img :src="`${cfg.api}img/${cfg.bossnamelist[item.boss_name].icon}`" />
          </div>
        </div>
      </template>
    </div>
    <!-- 弹出层 -->
    <m-win wd="1200" v-model:window_open="val.winckboss" :title="val.winckboss_title">
      <template #content>
        <div class="ngap">
          <div class="nbox3">根据出刀计算稳定评分，刀伤越稳定评分越高</div>
          <div
            style="display: flex; gap: 12px; flex-direction: column"
            v-if="val.ckboss != null"
          >
            <div class="bossdatabox">
              <div class="nbox3" style="height: 100%" v-for="(item, key) in val.cd">
                <div v-for="(item2, key2) in item">
                  <div class="title">{{ item2.user_name }}</div>
                  <div class="_rolelist">
                    <div class="roleava avacss1" v-for="item3 in item2.icon.split(',')">
                      <img class="_img1" :src="cfg.function.ava(item3)" />
                    </div>
                  </div>
                  <div class="bossdata_box2">
                    <div>最高：{{ item2.max_dmg.toLocaleString() }}</div>
                    <div>炽热：{{ item2.fever_dmg.toLocaleString() }}</div>
                    <div>
                      总伤：{{ item2.dmg_sum.toLocaleString() }} x{{ item2.count }}
                    </div>
                    <div>评分：{{ parseInt(item2.bfb) }}分</div>

                    <div
                      @click="
                        cfg.ckdao({ user_id: item2.user_id, season: sval.season_click })
                      "
                      class="bossdata_xxinfo"
                    >
                      [ 详细伤害数据 ]
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <div style="display: flex; gap: 8px">
          <n-button
            @click="set.px_bossdata('averageStability')"
            :type="val.sortname == 'averageStability' ? 'gt_y' : ''"
            >评分排序</n-button
          >
          <n-button
            @click="set.px_bossdata('max_dmg')"
            :type="val.sortname == 'max_dmg' ? 'gt_y' : ''"
            >伤害排序</n-button
          >
        </div>
      </template>
    </m-win>
  </div>
  <component :is="newdao" />
  <div class="nbox1">
    <div
      style="display: flex; gap: 8px; justify-content: space-between; align-items: center"
    >
      <div class="htitle">刀数统计</div>
      <n-button size="small" @click="val.show3 = !val.show3">显隐3刀数据</n-button>
    </div>
    <div class="cds_div nbg3">
      <div style="text-align: center; color: rgba(255, 255, 255, 0.52)">
        点击表格可查看出刀数据
      </div>
      <div class="cds_box">
        <div class="cds_uname cds_day">日期</div>
        <div class="cds_dao cds_day2">一</div>
        <div class="cds_dao cds_day2">二</div>
        <div class="cds_dao cds_day2">三</div>
        <div class="cds_dao cds_day2">四</div>
        <div class="cds_dao cds_day2">五</div>
        <div class="cds_dao cds_day2">六</div>
        <div class="cds_dao cds_day2">七</div>
      </div>
      <div
        class="cds_box"
        @click="cfg.ckdao({ user_id: item.user_id, season: sval.season_click })"
        v-for="item in val.cds"
      >
        <div class="cds_uname">
          {{ item.user_name }}
        </div>
        <div class="cds_dao" v-for="item2 in item.data">
          <template v-if="item2 == 3">
            <template v-if="val.show3 == true"></template>
            <template v-else>{{ item2 }}</template> </template
          ><template v-else>{{ item2 }}</template>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.cds_day {
  text-align: center;
}
.bossdata_xxinfo {
  color: rgba(255, 255, 255, 0.52);
  cursor: pointer;
  text-align: center;
}
.bossdata_box2 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  padding: 16px;
}
.cds_uname {
  text-align: right;
  overflow: hidden;
  font-size: 0.9em;
  max-height: 1.5em;
}
.cds_div {
  display: flex;
  padding: 8px;
  width: 600px;
  margin: 0 auto;
  flex-direction: column;
}

.cds_box {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 8px;
  padding: 8px;
  align-items: center;
}
.cds_uname {
  grid-column: span 4;
}
.cds_dao {
  text-align: center;
  border-radius: 5px;
  background-color: #2a3235;
  font-size: 1.1em;
}
.cds_day2 {
  background: 0;
}
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 35px;
  font-size: 1.1em;
}

.bossdatabox {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.bossdatabox > .nbox3 {
  padding: 0 !important;
}
._rolelist {
  display: flex;
  gap: 0.75em;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  justify-content: center;
  align-items: center;
}

.roleava {
  width: 2.75em;
  height: 2.75em;
  position: relative;
}

.roleava ._img1 {
  width: 100%;
  height: 100%;
}

.boss_box {
  cursor: pointer;
  display: flex;
  gap: 16px;
  padding: 0.75em;
  position: relative;
  border-radius: 3px;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
}

.n-h {
  margin-top: 5px;
}

@media (max-width: 768px) {
  .gap4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .bossimgbox {
    height: 55px !important;
  }
  .cds_div {
    width: 100%;
  }
  .cds_box {
    gap: 4px;
  }
  .bossdatabox {
    gap: 8px;
  }
  .boss_box {
    gap: 8px;
  }
  ._rolelist {
    gap: 0.5em;
  }
}

@media (max-width: 428px) {
  .gap4 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap2);
  }
  .cds_box {
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
    padding: 4px;
  }
  .cds_div {
    gap: 1vw;
  }
  .cds_uname {
    grid-column: span 3;
  }
  .bossimgbox {
    height: 14vw !important;
  }
  .bossdata_xxinfo {
    font-size: 2.75vw;
  }
  .bossdatabox {
    gap: 8px;
    grid-template-columns: repeat(2, 1fr);
  }
  .title {
    height: 35px;
    font-size: 3.75vw;
  }
  .nbox2 {
    padding: 0 !important;
  }
  .roleava {
    width: 8vw;
    height: 8vw;
  }
  ._rolelist {
    gap: 2vw;
    padding-top: 0;
    padding-bottom: 0;
  }
  .bossdata_box2 {
    gap: 0;
    font-size: 3.25vw;
    padding: 8px;
  }
}
</style>
<script>
import { cfg } from "@/cfg/cfg.js";
import newdao from "./gh_comp_newdao.vue";

export default {
  props: {
    tjval: {
      type: Object,
      required: false,
    },
  },
  setup(props) {
    const sval = props.tjval;
    const set = {
      page: (page) => {
        val.page = page;
        set.get_list();
      },
      seasub: () => {
        set.get_list();
      },
      //计算日期，计算过去了多少天
      jsrq: (time) => {
        // 解析输入日期（格式：YYYY-MM-DD）
        const targetDate = new Date(time);
        const currentDate = new Date();
        // 计算时间差（毫秒）
        const timeDiff = currentDate - targetDate;
        // 转换为天数
        const daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
        return daysDiff;
      },
      //点击boss头像获取数据
      ck_boss: async (boss) => {
        val.winckboss = true;
        val.winckboss_title = `[${boss}]首领伤害统计评分`;
        val.ckboss = boss;
        const dao = sval.guild_data.dao;
        await sval.guild_data.set.load_user();
        val.cd = {};
        //遍历所有出刀数据
        for (let index = 0; index < dao.length; index++) {
          const d = dao[index];

          if (d.boss_name != val.ckboss) {
            continue;
          }
          const user = d.user_id;
          const name = d.user_name;
          const icon = d.icon;
          const iconarr = icon?.split(",");
          if (val.cd[user] == null) {
            val.cd[user] = {};
          }
          if (val.cd[user][icon] == null) {
            val.cd[user][icon] = {
              user_id: user,
              user_name: name,
              icon: icon,
              show: false,
              fever: [],
              mao_time: [],
              //最高伤害
              max_dmg: 0,
              fever_dmg: 0,
              //每日伤害
              dmg: [],
              //累计伤害
              dmg_sum: 0,
              //攻击次数
              count: 0,
              //稳定百分比
              bfb: 0,
              //稳定百分比数组
              bfb_pt: [],
            };
          }
          const d2 = val.cd[user][icon];
          d2.count += 1;
          d2.dmg_sum += d.damage;
          if (d.fever == 1) {
            d2.fever_dmg = d.damage;
            //主控是克制判断为炽热
            if (cfg.kzpd(d.et, iconarr[0]) == true) {
              d2.dmg.push(d.damage / 1.154);
            } else {
              d2.dmg.push(d.damage);
            }
          } else {
            d2.dmg.push(d.damage);
          }
          d2.mao_time.push(d.mao_time);
          d2.fever.push(d.fever);

          if (d2.max_dmg < d.damage) {
            d2.max_dmg = d.damage;
          }
        }
        //计算稳定百分比
        for (const user in val.cd) {
          const d = val.cd[user];
          for (const icon in d) {
            const d2 = d[icon];
            const dmg = d2.dmg;
            // 1. 排序数组（升序）
            const sortedDmg = [...dmg].sort((a, b) => a - b);
            const mid0 = Math.floor(sortedDmg.length / 2);
            const [lower, upper] = [sortedDmg[mid0 - 1], sortedDmg[mid0]];
            const median =
              sortedDmg.length % 2 !== 0 ? sortedDmg[mid0] : (lower + upper) / 2;
            const base = median;
            // 2. 计算每个值的相对百分比
            const percentages = dmg.map((value) => (value / base) * 100);

            // 3. 计算综合稳定性（平均值）
            const averageStability =
              percentages.reduce((sum, p) => sum + p, 0) / percentages.length;

            const squaredDiffs = percentages.map((p) => Math.pow(p - 100, 2));
            const variance =
              squaredDiffs.reduce((sum, sd) => sum + sd, 0) / percentages.length;
            const stdDev = Math.sqrt(variance);
            //如果只要一刀则0分
            if (d2.count == 1) {
            } else {
              d2.bfb = Math.max(0, 100 - (stdDev / 20) * 100);
            }
            d2.bfb_pt = percentages;
            //val.cd[user]根据bfb排序
            val.cd[user] = Object.fromEntries(
              Object.entries(val.cd[user]).sort((a, b) => b[1].bfb - a[1].bfb)
            );
          }
          //icon转数组
          val.cd[user] = Object.values(val.cd[user]);
          //根据数组的总伤害大到小排序
          val.cd[user] = val.cd[user].sort((a, b) => b.dmg_sum - a.dmg_sum);
        }
        val.cd = Object.values(val.cd);
        set.px_bossdata(val.sortname);
      },
      //数据排序
      px_bossdata: (px) => {
        //根据bfb排序
        val.sortname = px;
        if (px == "averageStability") {
          val.cd = val.cd.sort((a, b) => b[0].bfb - a[0].bfb);
          return;
        }
        //根据总伤害排序
        if (px == "max_dmg") {
          val.cd = val.cd.sort((a, b) => b[0].max_dmg - a[0].max_dmg);
          return;
        }
      },
      //计算初始数据
      load_set: (arr) => {
        const userlth = sval.guild_data.user_arr.length;
        const dao = sval.guild_data.dao;
        const lastday = sval.guild_data?.date?.slice(-1);
        for (let index = 0; index < arr.length; index++) {
          const d2 = arr[index];
          if (d2 == "cds") {
            val.cds = {};
          } else {
            if (d2 == "yds") {
              val.yds = userlth * 3;
              val.ydsmax = userlth * 3;
            }
          }
        }

        for (let index = 0; index < dao.length; index++) {
          const d = dao[index];
          for (let index = 0; index < arr.length; index++) {
            const d2 = arr[index];
            if (d2 == "cds") {
              set.load_cds(d);
            } else {
              if (d2 == "yds" && d.mao_time == lastday) {
                val.yds -= 1;
              }
            }
          }
        }
        for (let index = 0; index < arr.length; index++) {
          const d2 = arr[index];
          if (d2 == "cds") {
            //   console.log(val.cds);
          }
        }
      },
      //计算出刀数
      load_cds: (d) => {
        if (val.cds[d.user_id] == null) {
          val.cds[d.user_id] = {
            data: [],
            user_id: d.user_id,
            user_name: d.user_name,
          };
          const date = sval.guild_data.date;
          for (let index = 0; index < date.length; index++) {
            val.cds[d.user_id].data.push(0);
          }
        }
        const key = sval.guild_data.maodate[d.mao_time];
        val.cds[d.user_id].data[key] += 1;
      },
    };
    const val = reactive({
      page: 1,
      sortname: "averageStability",
      data: [],
      loadset: ["cds", "yds"],
      cd: {},
      sea_username: cfg.route.query.sea_user ?? null,
      sea_guild: cfg.route.query.sea_guild ?? null,
    });
    //检测sval.guild_data.info变化重置数据
    watch(
      () => sval.guild_data.info,
      () => {
        val.cd = {};
        val.ckboss = null;
        set.load_set(val.loadset);
      }
    );
    onMounted(async () => {
      sval.navname = "数据总览";
      set.load_set(val.loadset);
      sval.guild_data.set.check_guilddata();
    });
    return { sval, cfg, set, val, newdao };
  },
};
</script>
